<template>
  <div>
    <!-- 搜索区域 -->
    <div class="search-bar">
      <div style="display: flex; justify-content: flex-start;">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="搜索：">
            <el-select v-model="searchForm.condition" placeholder="请选择" style="width: 120px;">
              <el-option label="全部" value="all"></el-option>
              <el-option label="陪玩姓名" value="playmateName"></el-option>
              <el-option label="手机号" value="playmateTelephone"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-input v-model="searchForm.keyword" placeholder="请输入搜索内容" style="width: 160px;"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="handleSearch" style="height: 32px; padding: 0 12px; font-size: 12px;">搜索</el-button>
          </el-form-item>

          <el-form-item>
            <el-button @click="resetSearch" style="height: 32px; padding: 0 12px; font-size: 12px;">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 待审核提现申请列表 -->
    <el-table :data="pendingCashList" height="510" border style="width: 100%">
      <el-table-column 
        :label="header" 
        v-for="header in tableHeader" :key="header" 
        :prop="getPropName(header)"
        width="222" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="mini" type="success" @click="handleApprove(scope.row)">通过</el-button>
          <el-button size="mini" type="danger" @click="handleReject(scope.row)">驳回</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="changePageSize"               
        @current-change="handleCurrentChange"
        :current-page="params.pageNum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count">
      </el-pagination>
    </div>

    <!-- 审核通过对话框 -->
    <el-dialog title="审核通过" :visible.sync="approveDialogVisible" width="30%">
      <el-form :model="approveForm" ref="approveForm" label-width="100px">
        <el-form-item label="打款凭证号" prop="voucher" :rules="{ required: true, message: '请输入打款凭证号', trigger: 'blur' }">
          <el-input v-model="approveForm.voucher" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="approveDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitApprove">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 驳回对话框 -->
    <el-dialog title="驳回申请" :visible.sync="rejectDialogVisible" width="30%">
      <el-form :model="rejectForm" ref="rejectForm" label-width="100px">
        <el-form-item label="驳回原因" prop="rejectReason" :rules="{ required: true, message: '请输入驳回原因', trigger: 'blur' }">
          <el-input type="textarea" v-model="rejectForm.rejectReason" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="rejectDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitReject">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableHeader: ['ID', '陪玩姓名', '手机号', '提现金额', '申请时间'],
      pendingCashList: [],
      count: 0,
      params: {
        pageNum: 1,
        pageSize: 10,
        playmateCashStatus: 0, // 待审核状态
        tenantId: 1
      },
      searchForm: {
        condition: 'all',
        keyword: ''
      },
      approveDialogVisible: false,
      rejectDialogVisible: false,
      currentRow: {}, // 当前操作的行数据
      approveForm: {
        voucher: ''
      },
      rejectForm: {
        rejectReason: ''
      }
    };
  },
  methods:{
    // 根据表头获取对应的属性名
    getPropName(header) {
      const mapping = {
        'ID': 'id',
        '陪玩姓名': 'playmateName',
        '手机号': 'playmateTelephone',
        '提现金额': 'playmateCashMoney',
        '申请时间': 'createTime'
      };
      return mapping[header];
    },
      // 加载待审核提现列表
    async loadPendingCashList(){
      const searchParams = {
        pageNum: this.params.pageNum,
        pageSize: this.params.pageSize,
        tenantId: this.params.tenantId,
        playmateCashStatus: this.params.playmateCashStatus,
        // 添加条件搜索字段
        playmateName: this.searchForm.condition === 'playmateName' ? this.searchForm.keyword : null,
        playmateTelephone: this.searchForm.condition === 'playmateTelephone' ? this.searchForm.keyword : null
      };
      const response = await this.financeApi.getPendingCashList(searchParams);
      if (response.code == 200) {
        this.pendingCashList = response.data.list;
        this.count = response.data.total;
      }else{
        this.$message.error("查询失败"+response.message);
      }
    },
     // 搜索
    handleSearch() {
      this.loadPendingCashList();
    },
    // 重置搜索条件
    resetSearch() {
      this.searchForm.condition = 'all';
      this.searchForm.keyword = '';
      this.loadPendingCashList();
    },
        // 改变页大小
    changePageSize(val) {
      this.params.pageSize = val;
      this.params.pageNum = 1;
      this.loadPendingCashList();
    },  
       // 改变当前页
    handleCurrentChange(val) {
      this.params.pageNum = val;
      this.loadPendingCashList();
    },
        // 处理通过操作
    handleApprove(row) {
      this.currentRow = row;
      this.approveForm.voucher = '';
      this.approveDialogVisible = true;
    },
        // 处理驳回操作
    handleReject(row) {
      this.currentRow = row;
      this.rejectForm.rejectReason = '';
      this.rejectDialogVisible = true;
    },
    // 提交通过审核
    async submitApprove(){
      this.$refs.approveForm.validate(async (valid) =>{
        if (valid) {
          const auditData = {
            cashId: this.currentRow.id,
            playmateCashStatus: 1, // 已打款
            voucher: this.approveForm.voucher,
            updater: "财务人员" // 实际应用中应从登录信息获取
          };
          const response = await this.financeApi.auditPlaymateCash(auditData);
          if (response.code == 200) {
            this.$message.success(response.message);
            this.approveDialogVisible = false;
            this.loadPendingCashList();
          }else{
            this.$message.error("审核通过失败");
          }
        }
      })
    },
    // 提交驳回审核
    async submitReject(){
      this.$refs.rejectForm.validate(async (valid) =>{ 
        if (valid) { 
          const auditData = {
              cashId: this.currentRow.id,
              playmateCashStatus: 2, // 已驳回
              rejectReason: this.rejectForm.rejectReason,
              updater: "" // 实际应用中应从登录信息获取
          };
          const response = await this.financeApi.auditPlaymateCash(auditData);
          if (response.code == 200) {
            this.$message.success("驳回成功");
            this.rejectDialogVisible = false;
            this.loadPendingCashList();
          }else{
            this.$message.error("审核驳回失败");
          }
        }
      })
    },
  },
  created(){
    this.loadPendingCashList();
  }
};
</script>

<style  scoped>
.search-bar {
  padding: 5px 0; /* 减小上下内边距 */
}

.demo-form-inline {
  display: flex;
  align-items: center;
  gap: 8px; /* 减小组件之间的间距 */
}

.el-form-item {
  margin-top: 0; /* 移除默认的顶部外边距 */
  margin-bottom: 0; /* 移除默认的底部外边距 */
}

.el-select .el-input__inner {
  height: 30px; /* 进一步减小高度 */
  font-size: 12px;
}

.el-input .el-input__inner {
  height: 30px; /* 进一步减小高度 */
  font-size: 12px;
}

.el-button {
  height: 30px; /* 进一步减小高度 */
  padding: 0 10px; /* 减小内边距 */
  font-size: 12px;
}
</style>
